<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign In</title>
    <link rel="stylesheet" href="${BaseUrl}/css/bootstrap.css">
    <link rel="stylesheet" href="${BaseUrl}/css/buttons-svg.css">
    <link rel="stylesheet" href="${BaseUrl}/css/buttons.css">
    <link rel="stylesheet" href="${BaseUrl}/css/svg-auth.css">
    <script src="${BaseUrl}/js/servicestack-client.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0 0 50px 0;
            color: #333;
        }
        a#logo {
            position: absolute;
            top: 4px;
            right: 0;
            width: 50px;
            height: 50px;
            background-size: 42px 42px;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3E .path%7B%7D %3C/style%3E %3Cg id='servicestack-svg'%3E%3Cpath fill='%23ffffff' class='path' stroke='null' d='m16.564516,43.33871c16.307057,2.035887 54.629638,20.41875 60.67742,46.306452l-78.241936,0c19.859879,-1.616734 36.825605,-27.344758 17.564516,-46.306452zm6.387097,-30.33871c6.446976,7.105645 9.520766,16.74617 9.26129,26.666129c16.546573,6.726411 41.376412,24.690121 46.625807,49.979033l19.161291,0c-8.123589,-43.132863 -54.529839,-73.551412 -75.048388,-76.645162z' /%3E%3C/g%3E%3C/svg%3E");
        }
        h1 {
            color: #FFF;
            font-size: 26px;
            font-weight: normal;
            margin: 0;
            padding: 0 0 0 15px;
            line-height: 48px;
            min-height: 48px;
            border-radius: 0px;
            border-bottom: 1px solid #191e23;
            background: #2c3742; /* Old browsers */
            background: linear-gradient(to bottom,  #2c3742 0%,#28303a 100%); /* W3C */
        }
        .stacktrace {
            background: #f1f1f1;
            padding: 1em;
            margin: 1em 0 .5em 0;
            border-radius: 5px;
            border: 1px solid #ccc;
            white-space: pre-wrap;
        }
        #auth {
            max-width: 350px;
        }
        @media (max-width: 768px)
        {
            .container {
                max-width: 700px;
            }
        }
    </style>
</head>
<body>
<a id="logo" href="https://servicestack.net" title="ServiceStack"></a>
<h1 id="title">
    <div class="container">Sign In</div>
</h1>

<div>
    <div id="content" class="container mt-4">

        <div class="row">
            <div class="col-5">

                <form action="${BaseUrl}/auth/credentials" method="post">
                    <div class="form-row">
                        <div class="form-group" data-validation-summary="userName,password"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <input class="form-control form-control-lg" name="userName" type="text"
                                   placeholder="UserName">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <input class="form-control form-control-lg" name="password" type="password"
                                   placeholder="Password">
                        </div>
                        <div class="form-group col-md-4">
                            <button type="submit" class="btn btn-lg btn-primary">Login</button>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <input type="checkbox" id="rememberMe" name="rememberMe" value="true">
                            <label for="rememberMe">Remember Me</label>
                        </div>
                    </div>
                </form>
            </div>

            <div class="col-7">
                <div class="row justify-content-end">
                    <div id="auth"></div>
                </div>
            </div>

        </div>
    </div>
</div>


<script>
    lib = window["@servicestack/client"];
    for (var k in lib) {
        window[k] = lib[k]
    }
    client = new JsonServiceClient('/');
    // regen dtos: `web ts && tsc wwwroot/assets/js/dtos.ts`
</script>

<script>
    var BaseUrl = "${BaseUrl}";
    var qs = queryString(location.href);
    var CONTINUE = qs.redirect || (BaseUrl + '/auth');

    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }

    bootstrapForm(document.querySelector('form'), {
        success: function (r) {
            location.href = CONTINUE;
        }
    });

    fetch(BaseUrl + '/auth.json')
        .then(function (r) {
            if (r.ok) {
                location.href = CONTINUE;
            }
        });

    fetch(BaseUrl + '/metadata/nav.json')
        .then(function(r){ return r.json(); })
        .then(function(r) {
            var sb = [];
            var iframe = inIframe();
            var auth = (r.navItemsMap || r.NavItemsMap || {})['auth'];
            if (auth)
            {
                for (var i=0; i<auth.length; i++) {
                    var nav = auth[i];
                    var meta = nav.meta || nav.Meta;
                    if (iframe && !(meta && meta.allows === 'embed')) continue;

                    var cls = nav.className || nav.ClassName;
                    var iconCls = nav.iconClass || nav.IconClass;
                    sb.push('<a href="' + BaseUrl + (nav.href || nav.Href) + '" class="btn btn-block btn-lg ' + cls + '">');
                    sb.push('<b class="' + iconCls + '"></b>');
                    sb.push(nav.label || nav.Label);
                    sb.push('</a>');
                }
                document.querySelector('#auth').innerHTML = sb.join('');
            }
        });
</script>

</body>
</html>
